<template>
  <view class="mian">
    <view class="navs">
      <view class="userinfo">
        <template>
          <view class="left">
            <image src="../../static/daka.jpeg" class="pic" @click="gologin" />
            <image src="../../static/wd.png" mode="" class="yyyy"></image>
            <view class="infomsg">
              <view class="infomsg_name">程小姐</view>
              <view class="infomsg_num">
                <text class="num_1">农地 3</text>|
                <text class="num_2">评价 220</text>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
    <!-- 订单导航 -->
    <view class="order">
      <view class="nav">
        <view class="nav-item">
          <image
            src="../../static/Snipaste_03.png"
            class="nav-img"
            mode="widthFix"
          />
          <text class="nav-text">我的农地</text>
        </view>
        <view class="nav-item" @click="goOrder">
          <image
            src="../../static/Snipaste_05.png"
            class="nav-img"
            mode="widthFix"
          />
          <text class="nav-text">我的订单</text>
        </view>
        <view class="nav-item">
          <image
            src="../../static/Snipaste_07.png"
            class="nav-img"
            mode="widthFix"
          />
          <text class="nav-text">浏览记录</text>
        </view>
        <view class="nav-item">
          <image
            src="../../static/Snipaste_09.png"
            class="nav-img"
            mode="widthFix"
          />
          <text class="nav-text">红包卡券</text>
        </view>
      </view>
      <view class="ul">
        <view class="li" @click="infomsg">个人信息</view>
        <view class="li" @click="goEvaluate">我的评价</view>
        <view class="li" @click="goaddress">收货地址</view>
        <view class="li" @click="customerservice">帮助与客服</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 默认图片地址
    };
  },
  computed: {},
  methods: {
    gologin() {
      uni.navigateTo({
        url: "/packageB/login/login",
      });
    },
    goOrder() {
      uni.navigateTo({
        url: "/packageA/order/index",
      });
    },
    goEvaluate() {
      uni.navigateTo({
        url: "/packageA/evaluate/index",
      });
    },
    infomsg() {
      uni.navigateTo({
        url: "/pages/my/infomsg",
      });
    },
    goaddress() {
      uni.navigateTo({
        url: "/packageB/pay/address",
      });
    },
    customerservice() {
      console.log(555);
      uni.navigateTo({
        url: "/pages/my/customerservice",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

// 页面背景
page {
  background-color: #f9f9f9;
}
.mian {
  font-family: "Poppins";
}

.navs {
  background: #eea427;
  height: 260rpx;
  border-radius: 0 0 10% 10%;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
  color: white;
  padding-top: 90rpx;

  // 用户信息
  .userinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx;
      position: relative;

      .yyyy {
        position: absolute;
        width: 90rpx;
        height: 90rpx;
        left: 0rpx;
        top: -15rpx;
      }

      .pic {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin: 20rpx;
      }
    }

    .infomsg {
      .infomsg_name {
        color: #fff;
        font-size: 34rpx;
        margin-bottom: 10rpx;
      }

      .infomsg_num {
        font-size: 24rpx;
        color: #f4d9c9;

        .num_1 {
          font-size: 24rpx;
          padding-right: 20rpx;
        }

        .num_2 {
          font-size: 24rpx;
          padding-left: 20rpx;
        }
      }
    }

    .line {
      width: 44rpx;
      height: 44rpx;
      margin-right: 20rpx;
    }
  }
}

// 导航列表

.order {
  position: relative;
  top: -50rpx;
  margin: 20rpx;
  border-radius: 15rpx;

  .nav-order {
    display: flex;
    justify-content: space-between;
    margin-left: 20rpx;
    padding-top: 10rpx;

    .alls {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bfbfbf;
      margin-right: 20rpx;
    }
  }
}

.nav {
  background-color: #fff;
  border-radius: 15rpx;
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  margin-bottom: 30rpx;

  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .nav-text {
      font-size: 24rpx;
      color: #3d3d3d;
    }

    .nav-img {
      width: 90rpx;
      height: 90rpx;
      margin-bottom: 10rpx;
    }
  }
}

.ul {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 20rpx;

  .li {
    margin: 0 auto;
    width: 90%;
    height: 60rpx;
    background: #f6f6f7;
    border-radius: 50rpx;
    margin-bottom: 20rpx;
    padding: 20rpx 40rpx;
    line-height: 60rpx;
    color: #1a1a1a;
    font-size: 30rpx;
  }
}
</style>